<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body,ul,li,dl,dt,dd,p,h1,h2,h3,h4,h5,h6{margin: 0;padding: 0;}
        li{list-style: none}
        a{text-decoration: none;color: #000;}
        #header{
            height: 40px;
            background-color: #333;
            color: #ccc;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }
        #footer{
            height: 400px;
            background-color: #eee;
        }

        #cont{
            padding: 20px 0;
        }
        .contTop{
            display: flex;
            width: 1100px;
            margin: 0 auto;
            justify-content: space-between;
            height: 500px;
        }
        .imgBox{
            width:400px;
            height: 400px;
            position: relative
        }
        .imgBox .smallBox{
            width:400px;
            height: 400px;
            border: solid 1px #ccc;
            box-sizing: border-box;
        }
        .imgBox .smallBox img{
            width:100%;
            height: 100%;
        }
        .imgBox .smallBox span{
            width:200px;height:200px;
            position: absolute;
            left:0;top:0;
            background: rgba(255,255,0,0.6);
            z-index: 2;
            display: none;
        }
        .imgBox .bigBox{
            position: absolute;
            top:0;right:-400px;
            width:400px;
            height: 400px;
            border: solid 1px #ccc;
            background: #fff;
            box-sizing: border-box;
            overflow: hidden;
            z-index: 1;
            display: none;
        }
        .imgBox .bigBox img{
            width:800px;
            height: 800px;
            position: absolute;
            left:0;top:0;
        }
        .infoBox{
            width:540px;
            padding: 10px;
            box-sizing: border-box;
        }
        .infoBox h2{
            font-size: 30px;
        }
        .infoBox p{
            margin: 20px 0;
        }
        .infoBox p:nth-child(2){
            font-size: 14px;
            color: #aaa
        }
        .infoBox p:nth-child(3){
            font-size: 26px;
            color: #d44d44;
            position: relative;
            top:180px;
        }
        .infoBox .addPro{
            border: solid 1px #aaa;
            background-color: #5f7ed7;
            line-height: 40px;
            height:40px;
            text-align: center;
            border-radius: 6px;
            width: 120px;
            color: #fff;
            position: relative;
            top:180px;
            cursor: pointer;
        }
        .infoBox .addPro:active{
            background-color:blue;
        }

        .contBottom img{
            width: 100%;
            display: block;
        }
    </style>
</head>
<body>
    <div id="header"></div>
    <div id="cont">
        <div class="contTop">
            <div class="imgBox">
                <div class="smallBox">
                    <img src="" alt="">
                    <span></span>
                </div>
                <div class="bigBox">
                    <img src="" alt="">
                </div>
            </div>
            <div class="infoBox">
                <h2></h2>
                <p></p>
                <p></p>
                <p class="addPro">加入购物车</p>
            </div>
        </div>
        <div class="contBottom">
            <img src="https://resource.smartisan.com/resource/f0124e173fd3f6eb15fc64d8794a22e1.jpg?x-oss-process=image/resize,w_2880/indexcrop,y_1440,i_0/format,webp/quality,Q_100">
            <img src="https://resource.smartisan.com/resource/f0124e173fd3f6eb15fc64d8794a22e1.jpg?x-oss-process=image/resize,w_2880/indexcrop,y_1440,i_1/format,webp/quality,Q_100">
            <img src="https://resource.smartisan.com/resource/f0124e173fd3f6eb15fc64d8794a22e1.jpg?x-oss-process=image/resize,w_2880/indexcrop,y_1440,i_2/format,webp/quality,Q_100">
            <img src="https://resource.smartisan.com/resource/f0124e173fd3f6eb15fc64d8794a22e1.jpg?x-oss-process=image/resize,w_2880/indexcrop,y_1440,i_3/format,webp/quality,Q_100">
            <img src="https://resource.smartisan.com/resource/f0124e173fd3f6eb15fc64d8794a22e1.jpg?x-oss-process=image/resize,w_2880/indexcrop,y_1440,i_4/format,webp/quality,Q_100">
            <img src="https://resource.smartisan.com/resource/f0124e173fd3f6eb15fc64d8794a22e1.jpg?x-oss-process=image/resize,w_2880/indexcrop,y_1440,i_5/format,webp/quality,Q_100">
            <img src="https://resource.smartisan.com/resource/f0124e173fd3f6eb15fc64d8794a22e1.jpg?x-oss-process=image/resize,w_2880/indexcrop,y_1440,i_6/format,webp/quality,Q_100">
            <img src="https://resource.smartisan.com/resource/f0124e173fd3f6eb15fc64d8794a22e1.jpg?x-oss-process=image/resize,w_2880/indexcrop,y_1440,i_7/format,webp/quality,Q_100">
            <img src="https://resource.smartisan.com/resource/f0124e173fd3f6eb15fc64d8794a22e1.jpg?x-oss-process=image/resize,w_2880/indexcrop,y_1440,i_8/format,webp/quality,Q_100">
            <img src="https://resource.smartisan.com/resource/f0124e173fd3f6eb15fc64d8794a22e1.jpg?x-oss-process=image/resize,w_2880/indexcrop,y_1440,i_9/format,webp/quality,Q_100">
        </div>
    </div>
    <div id="footer"></div>
</body>
<script src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
<script>
    // 加载头部的结构
    $("#header").load("../public/header.html");
    // 加载底部的结构
    $("#footer").load("../public/footer.html");

    // 详情页的功能
    // ...
    // 解析地址栏中拼接的数据
    var hash = location.hash.slice(1);
    // console.log(hash)
    // 发起数据请求
    $.ajax({
        url:"../data/pro.json",     // 请求的数据地址
        dataType:"text",            // 请求的数据类型
        success:function(res){      // 请求成功
            // 解析数据
            res = JSON.parse(res);
            // 遍历数据
            for(var i=0;i<res.length;i++){
                // 判断数据中的id和地址栏中传过来的数据是否一致
                if(res[i].proId === hash){
                    // console.log(res[i].proImg)
                    // 填充页面结构
                    $(".imgBox").find("img").attr("src",res[i].proImg);
                    $(".infoBox").find("h2").html(res[i].proName);
                    $(".infoBox").find("p").eq(0).html(res[i].proInfo);
                    $(".infoBox").find("p").eq(1).html(res[i].price);
                }
            }
        }
    })
</script>

<script>

    $(".addPro").click(function(){
        // 获取用户信息
        var uMsg = localStorage.getItem("userMsg");
        // 解析用户信息
        if(uMsg === null){
            uMsg = [];
        }else{
            uMsg = JSON.parse(uMsg);
        }
        // 解析数组中的数据，判断isLogin是否为ok
        var flag = false;
        for(var i=0;i<uMsg.length;i++){
            if(uMsg[i].isLogin === "ok"){
                flag = true;
                break;
            }
        }
        // 如果没有登录，不允许用户加入购物车数据，登录了才能加入
        // 未登录状态，强行点击加入购物车，自动跳转到登录页面
        // 判断有没有登录
        if(flag){
            // 一个购物车，对应多条商品
            // 每个商品，又是一个对象
            // 一个数据，中存储多个对象
            // [{id:12j3hg,num:8},{id:896ufgjs,num:2},{id:98asd,num:1}...]

            // 先读取，读到了，就存过，没读到，没存过
            // 读谁？读将来准备存的名字
            var msg = localStorage.getItem("proMsg");
            if(msg === null){
                // 没有读取到数据，设定一个默认值，空数组
                msg = [];
            }else{
                // 读到了，解析这个数据，解析成数组
                msg = JSON.parse(msg);
            }
            // console.log(msg);

            // 判断数组的长度，是否小于1
            if(msg.length < 1){
                // 小于1，表示，之前没有存过：直接存（只是在修改数组）
                msg.push({
                    id:location.hash.slice(1),
                    num:1,
                    flag:true,
                    price:$(this).prev("p").html()
                })
                // 将数组的数据，存到localStorage
                localStorage.setItem("proMsg",JSON.stringify(msg))
            }else{
                // 不小于1，表示，之前存过：判断这次存的商品是否是新的
                // 提前准备状态，用来记录是否重复
                var onoff = false;
                // 遍历数据
                for(var i=0;i<msg.length;i++){
                    // 逐个比对
                    if(msg[i].id === location.hash.slice(1)){
                        // 发现重复，修改状态
                        onoff = true;
                        // 停止遍历
                        break;
                    }
                }
                // 根据状态，判断是否有重复
                if(onoff){
                    // 有重复，旧的，增加旧数据的数量
                    msg[i].num++;
                }else{
                    // 没有重复，新的，增加一个新数据
                    msg.push({
                        id:location.hash.slice(1),
                        num:1,
                        flag:true,
                        price:$(this).prev("p").html()
                    })
                }
                // 将数组的数据，存到localStorage
                localStorage.setItem("proMsg",JSON.stringify(msg))
            }
        }else{
            location.href = "../login/index.html";
        }

        renderCart();

    })

</script>

<script>
    // 测试元素的选择和尺寸的获取：
    // console.log($(".smallBox"))
    // console.log($(".smallBox").find("img"))
    // console.log($(".smallBox").find("span"))
    // console.log($(".bigBox"))
    // console.log($(".bigBox").find("img"))

    // 因为img是一个特殊标签，图片的尺寸需要通过load事件获取，除非提前在css中设置了尺寸
    // console.log($(".smallBox").find("img").width());
    // console.log($(".bigBox").find("img").width());
    // console.log($(".smallBox").find("img").height());
    // console.log($(".bigBox").find("img").height());

    // 鼠标进入左侧小框，显示遮罩层和右侧大框
    $(".smallBox").mouseover(function(){
        $(".smallBox").find("span").show();
        $(".bigBox").show();
    })

    // 鼠标离开左侧小框，隐藏遮罩层和右侧大框
    $(".smallBox").mouseout(function(){
        $(".smallBox").find("span").hide();
        $(".bigBox").hide();
    })

    // 鼠标在左侧小框移动
    $(".smallBox").mousemove(function(){
        // 鼠标相对于页面的坐标
        // console.log(event.pageX);
        // console.log(event.pageY);

        // 某个元素距离页面（包含块）的距离
        // console.log($(".smallBox").offset().left)
        // console.log($(".smallBox").offset().top)

        // 某个元素的宽高
        // console.log($(".smallBox").find("span").width())
        // console.log($(".smallBox").find("span").height())

        // 计算遮罩层要移动的距离
        var x = event.pageX - $(".smallBox").offset().left - $(".smallBox").find("span").width()/2;
        var y = event.pageY - $(".smallBox").offset().top - $(".smallBox").find("span").height()/2;

        // 遮罩层的边界限定
        // 最小值：左0上0
        if(x<0){
            x = 0;
        }
        if(y<0){
            y = 0;
        }
        // 最大值：右下最大值的计算
        var maxW = $(".smallBox").width() - $(".smallBox").find("span").width();
        var maxH = $(".smallBox").height() - $(".smallBox").find("span").height();
        // 最大值的限定
        if(x > maxW){
            x = maxW;
        }
        if(y > maxH){
            y = maxH;
        }

        // 设置遮罩层的位置
        $(".smallBox").find("span").css({
            left:x,
            top:y
        })

        // 计算遮罩层移动距离的比例
        // console.log(x / maxW, y / maxH);

        // 计算右侧大图能移动的总距离
        var bigMaxW = $(".bigBox").width() - $(".bigBox").find("img").width();
        var bigMaxH = $(".bigBox").height() - $(".bigBox").find("img").height();

        // 根据左侧遮罩层移动的比例，计算右侧大图真正要移动的距离，并设置给右侧大图
        $(".bigBox").find("img").css({
            left:x / maxW * bigMaxW,
            top:y / maxH * bigMaxH
        })
    })

</script>
</html>